<template>
  <div class="approval">
    <router-view v-slot="{ Component }" v-show="flagshow">
      <transition name="fade" mode="out-in" appear>
        <component :is="Component" />
      </transition>
    </router-view>
    <div v-show="!flagshow">
      <div class="top">
        <div>
          <p>当前审批中</p>
          <p>{{ processState.length }}</p>
        </div>
        <div>
          <p>本月审批通过</p>
          <p>{{ processState1.length }}</p>
        </div>
        <div>
          <p>本月审批驳回</p>
          <p>{{ processState2.length }}</p>
        </div>
      </div>
      <div class="bottom">
        <Approvaltable :approvalList="approvalList" :render="render" />
        <el-pagination layout="prev, pager, next" :total="Number(total)" v-model:current-page="page"
          v-model:page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
import { ref, onMounted, watchEffect } from "vue";
import { getApprovalList } from "../api/approval";
import Approvaltable from "../components/approvaltable.vue";
const approvalList = ref<any>([]);
const page = ref(1);
const pageSize = ref(6);
const total = ref("");
let flagshow = ref(true)
let processState: any = ref([])
let processState1: any = ref([])
let processState2: any = ref([])
const render = () => {
  getApprovalList(page.value, pageSize.value).then((res) => {
    total.value = res.data.data.total;
    approvalList.value = res.data.data.rows;
  });
};
getApprovalList(page.value, pageSize.value).then((res) => {
  res.data.data.rows.forEach((item: any) => {
    if (item.processState == 1) {
      processState.value.push(item)
    } else if (item.processState == 2) {
      processState1.value.push(item)
    } else if (item.processState == 3) {
      processState2.value.push(item)
    }
  })
});
onMounted(() => {
  render();
});
const handleSizeChange = (val: number) => {
  render();
};
const handleCurrentChange = (val: number) => {
  render();
};
watchEffect(() => {
  if (route.path === '/home/approval/Approvaldetail') {
    flagshow.value = true;
  } else {
    setTimeout(() => {
      flagshow.value = false;
    }, 600)
  }
})
</script>

<style scoped>
.top {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.top div {
  height: 100%;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bottom {
  margin-top: 20px;
  width: 100%;
  height: 500px;
  background-color: #fff;
}

.el-pagination {
  margin-left: 550px;
  margin-top: 20px;
}
</style>
